// 比例尺
import { CoordinateSystem } from "./Constants";
import GridSystem from "./GridSystem"
let timerOfDraw = 0;

class ScaleRuler {

    glInstance: GridSystem;
    domElement: HTMLCanvasElement;
    ctx: CanvasRenderingContext2D;

    constructor(gls: GridSystem) {
        this.glInstance = gls;
        const left = this.glInstance.ctx.canvas.clientLeft;
        const top = this.glInstance.ctx.canvas.clientTop;
        this.domElement = document.createElement("canvas");
        this.domElement.style.position = "fixed";
        this.domElement.style.zIndex = '-1';
        this.domElement.style.left = left + "px";
        this.domElement.style.top = top + "px";
        this.glInstance.domElement.parentNode && this.glInstance.domElement.parentNode.appendChild(this.domElement);
        this.ctx = this.domElement.getContext('2d') || new CanvasRenderingContext2D();
        this.ctx.canvas.width = this.glInstance.ctx.canvas.width;
        this.ctx.canvas.height = this.glInstance.ctx.canvas.height;
    }

    draw(loop = true) {
        timerOfDraw && cancelAnimationFrame(timerOfDraw)
        this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
        this.drawRuler();
        if (loop) {  // 是否循环渲染
            timerOfDraw = window.requestAnimationFrame(() => this.draw(loop))
        }
    };

    drawRuler() {
        const ctx = this.ctx;
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.save()

        // 比例尺的数字
        const text = `x ${this.glInstance.scale.toFixed(2)}`;
        const textWidth = ctx.measureText(text).width
        ctx.beginPath();
        ctx.strokeStyle = "#002c8c";
        ctx.moveTo(ctx.canvas.width - 100, ctx.canvas.height - 30);
        ctx.lineTo(ctx.canvas.width - 100, ctx.canvas.height - 20);
        ctx.lineTo(ctx.canvas.width - (50 - textWidth), ctx.canvas.height - 20);
        ctx.lineTo(ctx.canvas.width - (50 - textWidth), ctx.canvas.height - 30);
        ctx.stroke();
        ctx.fillStyle = '#002c8c';
        ctx.font = '15px Arial';
        ctx.fillText(text, ctx.canvas.width - 80, ctx.canvas.height - 27);

        // 比例尺的刻度线
        ctx.strokeStyle = "#000";
        ctx.lineWidth = .7;
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(ctx.canvas.width, 0);
        ctx.moveTo(0, 0);
        ctx.lineTo(0, ctx.canvas.height);
        ctx.fillStyle = '#000';
        const fontSize = 12
        ctx.font = `${fontSize}px 黑体`;
        const gridSize = Number(this.glInstance.getRatioSize(CoordinateSystem.GRID_SIZE).toFixed(0));
        // 水平方向
        for (let index = 0; index < this.glInstance.pageSlicePos.x / gridSize; index++) {
            const x = this.glInstance.pageSlicePos.x - gridSize * index;
            ctx.moveTo(x, 0);  // 刻度
            ctx.lineTo(x, 8);
            const label = String(gridSize * index)  // 刻度下面得文字
            const labelWidth = ctx.measureText(label).width
            ctx.fillText(label, x - labelWidth / 2, 18);
        }
        for (let index = 0; index < (ctx.canvas.width - this.glInstance.pageSlicePos.x) / gridSize; index++) {
            const x = this.glInstance.pageSlicePos.x + gridSize * index;
            ctx.moveTo(x, 0);  // 刻度
            ctx.lineTo(x, 8);
            const label = String(gridSize * index)  // 刻度下面得文字
            const labelWidth = ctx.measureText(label).width
            ctx.fillText(label, x - labelWidth / 2, 18);
        }
        // 垂直方向
        for (let index = 0; index < this.glInstance.pageSlicePos.y / gridSize; index++) {
            const y = this.glInstance.pageSlicePos.y - gridSize * index;
            ctx.moveTo(0, y);  // 刻度
            ctx.lineTo(10, y);
            const label = String(gridSize * index)  // 刻度下面得文字
            ctx.fillText(label, 15, y + fontSize / 2);
        }
        for (let index = 0; index < (ctx.canvas.height - this.glInstance.pageSlicePos.y) / gridSize; index++) {
            const y = this.glInstance.pageSlicePos.y + gridSize * index;
            ctx.moveTo(0, y);  // 刻度
            ctx.lineTo(10, y);
            const label = String(gridSize * index)  // 刻度下面得文字
            ctx.fillText(label, 15, y + fontSize / 2);
        }
        ctx.stroke();
        ctx.restore()
    }

    destroy() {
        cancelAnimationFrame(timerOfDraw)
        const parentNode = this.glInstance.domElement.parentNode as HTMLElement;
        parentNode.removeChild(this.domElement)
    }
}

export default ScaleRuler;